<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="lib/bulma.min.css">
  <style>
    .box {
      width: 1200px;
      margin: 0 auto;
    }

    .box img {
      width: 80px;
      height: 80px;
    }

    tr td:nth-of-type(3),
    tr th:nth-of-type(3) {
      width: 500px;
    }

    .num {
      width: 100px;
    }
  </style>
</head>

<body>
  <!-- 
    1. 循环渲染数据   ok
    2. 商品加个保留2位小数   ok
    3. 按钮改变数量++ -- （选做）   ok
    4. 商品小计改变价格（选做）  ok
    5. 删除（选做）

    了解：什么是MVVM，什么是双向数据绑定，渐进式和声明式
  -->
  <div id="app">
    <div class="box">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>商品图片</th>
            <th>商品介绍</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>商品小计</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in arr">
            <td><input type="checkbox" v-bind:checked="item.flag" @click="changeStatus(index)"></td>
            <td><img v-bind:src="item.imgUrl" />
            </td>
            <td>
              <p>{{item.txt}}</p>
            </td>
            <td>￥{{Number(item.price).toFixed(2)}}</td>
            <td>
              <div>
                <button class="button is-small donwn" @click="count_down(index)" v-bind:disabled="item.num<=1">-</button>
                <input type="text" v-bind:value="item.num" class="input num is-small">
                <button class="button is-small" @click="count_add(index)">+</button>
              </div>
            </td>
            <td>
              <b>{{item.price * item.num}}</b>
            </td>
            <td><span @click="delete_tr(index)">删除</span></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td><input type="checkbox" @click="allSelect()" v-bind:checked="allchecked"></td>
            <td>合计</td>
            <td></td>
            <td></td>
            <td></td>
            <td>商品小计：{{sum_price}}</td>
            <td @click="deleteAll()">全部删除</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
  <script src="lib/vue.global.js"></script>
  <script>

    var app = Vue.createApp({
      data() {
        return {
          arr: [
            {
              flag: false,
              imgUrl: 'https://img12.360buyimg.com/n7/jfs/t1/182913/10/30630/75042/64703b85Fbd5c279c/60dfec127dd8ba37.jpg',
              txt: 'SHIMANO禧玛诺 阿德CQ BFS库拉多水滴鼓轮微物马口白条溪流路亚轮 23款CQ',
              price: '3499',
              num: 1,
              countdown_flag: false
            },
            {
              flag: false,
              imgUrl: 'https://img12.360buyimg.com/n7/jfs/t1/182913/10/30630/75042/64703b85Fbd5c279c/60dfec127dd8ba37.jpg',
              txt: '加特林 无限 .56',
              price: '2399',
              num: 1,
              countdown_flag: false
            },
            {
              flag: false,
              imgUrl: 'https://img12.360buyimg.com/n7/jfs/t1/182913/10/30630/75042/64703b85Fbd5c279c/60dfec127dd8ba37.jpg',
              txt: '手榴弹 水弹 10公分',
              price: '3',
              num: 1,
              countdown_flag: false
            }
          ],
          allchecked: false,
          sum_price:0
        }
      },
      methods: {
        delete_tr(index) {
          app.arr.splice(index, 1);
          app.sum();
        },
        allSelect() {
          app.allchecked = !app.allchecked;
          for (let i = 0; i < app.arr.length; i++) {
            app.arr[i].flag = app.allchecked
          }
          app.sum()
        },
        deleteAll(){
          app.arr.splice(0,app.arr.length);
          app.sum();
        },
        changeStatus(index){
          app.arr[index].flag=!app.arr[index].flag;
          app.sum();
        },
        sum(){
          // 点击事件里添加求和
          //如果flag为true，则计算小计的和
          // 遍历数据
          app.sum_price=0;
          for(let j=0;j<app.arr.length;j++){
            if(app.arr[j].flag){
              app.sum_price+=app.arr[j].price*app.arr[j].num
            }
          }
          console.log(app.sum_price)
          return app.sum_price
        },
        count_down(index){
          app.arr[index].num--;
          app.sum();
        },
        count_add(index){
          app.arr[index].num++;
          app.sum();
        }
      }
    }).mount('#app')


  </script>
</body>

</html>